<template>
    <div>
        <div style="border-radius: 5px;padding: 20px 0;width: 100%;background-color: #fafafa;">
            <div style="height: 100px;line-height: 100px;text-align: center;font-size: 24px;">健康生活，健康人生，从此刻开始！</div>
            <div style="height: 50px;line-height: 50px;text-align: center;font-size: 30px;font-weight: bolder;">
                每一点改变，都值得被记录。
                <span @click="toRecord"
                    style="cursor: pointer;;padding: 5px 10px ;background-color: #000;border-radius: 5px;color: #fff;">
                    前去记录
                    <i class="el-icon-right"></i>
                </span>
            </div>
        </div>
        <div style="padding: 30px 0;">
            <div style="margin: 20px 0;">
                <!-- 选择具体的指标模型 -->
                <span style="margin: 10px 20px 10px 5px;">分类</span>
                <el-select size="small" @change="modelChange" v-model="userHealthQueryDto.healthModelConfigId"
                    placeholder="请选择">
                    <el-option v-for="model in usersHealthModelConfig" :key="model.id" :label="model.name"
                        :value="model.id">
                    </el-option>
                </el-select>
            </div>
            <div>
                <LineChart @on-selected="onSelectedTime" height="500px" tag="健康指标值" :values="values" :date="dates" />
            </div>
        </div>
    </div>
</template>
<script>
import LineChart from '@/components/LineChart.vue';
export default {
    components: { LineChart },
    data() {
        return {
            usersHealthModelConfig: [],
            userHealthQueryDto: {}, // 查询的参数
            values: [],
            dates: []
        }
    },
    created() {
        this.loadHealthModelConfig();
    },
    methods: {
        // 查询用户具体记录的值，指定时间范围内
        loadUserModelHavaRecord() {
            // 往后端什么？
            this.$axios.get(`/user-health/timeQuery/${this.userHealthQueryDto.healthModelConfigId}/${this.userHealthQueryDto.time}`).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    // 拿到的数据，要做可视化处理
                    this.values = data.data.map(entity => entity.value).reverse();
                    this.dates = data.data.map(entity => entity.createTime).reverse();
                }
            })
        },
        // 模型选中方法
        modelChange() {
            this.loadUserModelHavaRecord();
        },
        loadHealthModelConfig() {
            const userInfo = sessionStorage.getItem('userInfo');
            const entity = JSON.parse(userInfo);
            this.$axios.post("/health-model-config/query", { userId: entity.id }).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.usersHealthModelConfig = data.data;
                    this.defaultLoad();
                }
            })
        },
        // 默认加载
        defaultLoad() {
            this.userHealthQueryDto.healthModelConfigId = this.usersHealthModelConfig[0].id;
            this.userHealthQueryDto.time = 7;
            this.loadUserModelHavaRecord();
        },
        // 折线图选择指定事件范围之后，返回的一个回调
        onSelectedTime(time) {
            this.userHealthQueryDto.time = time;
            this.loadUserModelHavaRecord();
        },
        // 组件里面返回的数据
        timeSelected() {

        },
        toRecord() {
            this.$router.push('/record');
        },
    }
};
</script>
<style scoped lang="scss"></style>